<template>
  <div>
    <el-drawer
      title="进件信息"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="true"
      size="70%"
    >
      <div id="loading-wrap" style="padding: 0 24px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人信息" name="first">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>个人信息</span>
              </div>
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <el-descriptions-item v-for="(item, index) in firstConfig" :key="index">
                  <template slot="label">
                    {{ item.value }}
                  </template>
                  {{ item.data }}
                </el-descriptions-item>

              </el-descriptions>
              <el-form v-if="curItem.examineOrder == 2" ref="form" :model="form" label-position="top">
                <el-form-item label="状态" prop="status" :rules="{ required: true, message: '请选择状态'}">
                  <el-select v-model="form.status" placeholder="请选择" style="width: 100%;" clearable size="small">
                    <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="remark" :rules="{required: true, message: '备注不能为空'}">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
                </el-form-item>

                <el-form-item>
                  <div class="footer-btn">
                    <el-button type="primary" :loading="loading" @click="onSubmitPerson(form, 'informationReview')">保存</el-button>
                    <el-button @click="handleClose">取消</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="进件材料" name="second">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>进件材料</span>
              </div>
              <el-form ref="form1" :model="form1" label-width="180px" label-position="top">
                <div class="image-wrap">
                  <div v-for="(item, index) in images " :key="index">
                    <imageBox :label="item.label" :data="item.data" />
                  </div>
                </div>
                <div v-if="curItem.examineOrder == 2">
                  <el-form-item label="状态" prop="status" :rules="{ required: true, message: '请选择状态'}">
                    <el-select v-model="form1.status" placeholder="请选择" style="width: 100%;" clearable size="small">
                      <el-option
                        v-for="item in statusOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark" :rules="{required: true, message: '备注不能为空'}">
                    <el-input v-model="form1.remark" type="textarea" placeholder="请输入备注" />
                  </el-form-item>

                  <el-form-item>
                    <div class="footer-btn">
                      <el-button type="primary" :loading="loading" @click="onSubmitPerson(form1, 'materialsReview')">保存</el-button>
                      <el-button @click="handleClose">取消</el-button>
                    </div>
                  </el-form-item>
                </div>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="车辆照片" name="third">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>车辆照片</span>
              </div>
              <el-form label-width="180px" :model="form2" label-position="top">
                <div class="image-wrap">
                  <div v-for="(item, index) in thirdConfig " :key="index">
                    <imageBox :label="item.label" :data="item.data" />
                  </div>
                </div>

                <div v-if="curItem.examineOrder == 2">
                  <el-form-item label="状态" prop="status" :rules="{ required: true, message: '请选择状态'}">
                    <el-select v-model="form2.status" placeholder="请选择" style="width: 100%;" clearable size="small">
                      <el-option
                        v-for="item in statusOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark" :rules="{required: true, message: '备注不能为空'}">
                    <el-input v-model="form2.remark" type="textarea" placeholder="请输入备注" />
                  </el-form-item>

                  <el-form-item>
                    <div class="footer-btn">
                      <el-button type="primary" :loading="loading" @click="onSubmitPerson(form2, 'carImageReview')">保存</el-button>
                      <el-button @click="handleClose">取消</el-button>
                    </div>
                  </el-form-item>
                </div>

              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import request from '@/utils/request'
import imageBox from './imageBox.vue'

export default {
  components: {
    imageBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    curItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loadingState: null,
      loading: false,
      form: {},
      form1: {},
      form2: {},
      activeName: 'first',
      statusOption: [{ label: '通过', value: 1 }, { label: '驳回', value: 0 }],
      images: [],
      firstConfig: [],
      thirdConfig: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.activeName = 'first'
      this.images = []
      this.firstConfig = []
      this.thirdConfig = []
      this.$emit('handleClose')
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap'
      })
      this.loadingState = loading
    },

    /** 审核身份 */
    onSubmitPerson(p, url) {
      const params = { ... p }
      this.loading = true
      request({ url: 'system/dataReview/' + url, params: params }).then(res => {
        this.$message({
          message: '审核成功',
          type: 'success'
        })
        this.$emit('add-success')
      }).finally(() => {
        this.loading = false
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    getInfo(id) {
      Promise.all([
        request({ url: 'system/information/' + id, method: 'get' }),
        request({ url: 'system/materials/' + id, method: 'get' }),
        request({ url: 'system/carImage/' + id, method: 'get' })
      ]).then(([d1, d2, d3]) => {
        // 处理第一个内容
        if (d1.data) {
          const firstConfig = [
            { key: 'educational', value: '最高学历' }, { key: 'income', value: '年收入' }, { key: 'email', value: '邮箱' },
            { key: 'address', value: '现居住地址' }, { key: 'addressDetail', value: '详细地址' }, { key: 'propertyHouse', value: '居住性质' },
            { key: 'corporateName', value: '单位名称' }, { key: 'position', value: '工作职位' }, { key: 'companyAddress', value: '单位地址' },
            { key: 'companyAddressDetail', value: '单位地址详情' }, { key: 'marriage', value: '婚姻状况' }, { key: 'emergencyContact1', value: '紧急联系人1' },
            { key: 'relationship1', value: '联系人1关系' }, { key: 'phone1', value: '联系人1电话' }, { key: 'emergencyContact2', value: '紧急联系人2' },
            { key: 'relationship2', value: '联系人2关系' }, { key: 'phone2', value: '联系人2电话' }
          ]
          Object.entries(d1.data).forEach(([key, value]) => {
            const findIndex = firstConfig.findIndex(it => it.key === key)

            if (findIndex !== -1) {
              firstConfig[findIndex].data = value
            }
          })
          this.form = { id: d1.data.id }
          this.firstConfig = firstConfig
        }
        // 处理第二个内容
        const config = [{ value: '身份证正反面', key: 'idCardImage' }, { key: 'handheldIdCard', value: '手持身份证' }, { key: 'driverLicense', value: '驾驶证' }, { key: 'drivingLicense', value: '行驶证' },
          { key: 'bankCard', value: '银行卡' }, { key: 'guaranteeSlip', value: '保单' }, { key: 'registrationCertificate', value: '登记证' }, { key: 'offencePoints', value: '交管违章扣分' },
          { key: 'carStatus', value: '交管我的信息' }, { key: 'information', value: '交管机动车状态' }, { key: 'other', value: '其他' }
        ]
        const arr = []
        if (d2.data) {
          Object.entries(d2.data).forEach(([key, value]) => {
            const find = config.find(it => it.key === key)
            if (find) {
              arr.push({
                label: find.value,
                data: value ? value.split(',') : []
              })
            }
          })

          this.form1 = { id: d2.data.id }
        }
        this.images = arr
        // 处理第三个
        if (d3.data) {
          const thirdConfig = [
            { value: '人车合影', key: 'personCarImage' }, { value: '里程表', key: 'odometer' }, { value: '车正面', key: 'carFront' }, { value: '车后面', key: 'carBehind' },
            { value: '左前45', key: 'left45' }, { value: '右后45', key: 'right45' }, { value: '发动机舱', key: 'engineCompartment' }, { value: '出厂铭牌', key: 'factoryNameplate' },
            { value: '中控内饰', key: 'centralControlInterior' }, { value: '其他', key: 'other' }
          ]
          const arr = []
          if (d2.data) {
            Object.entries(d3.data).forEach(([key, value]) => {
              const find = thirdConfig.find(it => it.key === key)
              if (find) {
                arr.push({
                  label: find.value,
                  data: value ? value.split(',') : []
                })
              }
            })
          }
          this.form2 = { id: d3.data.id }
          this.thirdConfig = arr
        }
      }).finally(() => {
        this.loadingState?.close()
      })
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.image-wrap {
  width: 90%;
  /* border:  1px solid black; */
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
</style>
